// 轮播图模块

window.addEventListener('DOMContentLoaded', function () {
  ;(function () {
    const shopCar = document.querySelector('#gouwuche')
    shopCar.onclick = function () {
      location.href = './html/shoppingCart.html'
    }
    input.addEventListener('click', function () {
      location.href = './html/shoppingCart.html'
    })
    /*   shopCar.addEventListener('click', function () {
      location.href = './html/shoppingCart.html'
    }) */
  })()
  // ;(function () {
  //   /* 轮播图数据 */
  //   const data = [
  //     {
  //       src: './public/produceImgs/lx-banner-0.jpg',
  //     },
  //     {
  //       src: './public/produceImgs/lx-banner-1.jpg',
  //     },
  //     {
  //       src: './public/produceImgs/lx-banner-2.jpg',
  //     },
  //     {
  //       src: './public/produceImgs/lx-banner-3.jpg',
  //     },
  //     {
  //       src: './public/produceImgs/lx-banner-4.jpg',
  //     },
  //   ]
  //   // 轮播图开始
  //   const ul = document.querySelector('#slider-circle')

  //   for (let i = 0; i < data.length; i++) {
  //     const li = document.createElement('li')
  //     li.dataset.index = i
  //     ul.appendChild(li)
  //   }
  //   ul.children[0].classList.add('active')

  //   const img = document.querySelector('.slider-wrapper img')
  //   ul.addEventListener('click', function (e) {
  //     if (e.target.tagName === 'LI') {
  //       document.querySelector('li.active').classList.remove('active')
  //       e.target.classList.add('active')
  //       const index = e.target.dataset.index
  //       img.src = data[index].src

  //       $('.wrapper-img').fadeOut(500, () => {
  //         $('.wrapper-img').fadeIn(1000)
  //       })
  //     }
  //   })
  //   const lis = ul.children

  //   let index = 0
  //   let timeId = null

  //   let flag = true
  //   timeId = setInterval(function () {
  //     index++
  //     if (index > data.length - 1) {
  //       index = 0
  //     }
  //     lis[index].click()
  //   }, 1500)
  //   // 轮播图结束

  //   /* 鼠标移入移除停止和开始计时器 */
  //   const slider = document.querySelector('.focus')
  //   slider.addEventListener('mouseenter', function () {
  //     clearInterval(timeId)
  //     // console.log(11)
  //   })
  //   slider.addEventListener('mouseleave', function () {
  //     // console.log(12)
  //     clearInterval(timeId)

  //     timeId = setInterval(function () {
  //       index++
  //       if (index > data.length - 1) {
  //         index = 0
  //       }
  //       lis[index].click()
  //     }, 1500)
  //   })
  // })()
  ;(function () {
    var mySwiper = new Swiper('.swiper', {
      effect: 'fade',
      autoplay: {
        delay: 1500,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },

      direction: 'horizontal', // 垂直切换选项

      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  })()
  // 轮播图左侧
  ;(function () {
    // 数据
    const data = [
      [
        {
          name: '暖腰暖腹暖胃 靳艾暖宫腰带',
          src: 'https://yanxuan-item.nosdn.127.net/9892cc73945da1591fa5259ad076b23c.jpg',
          describe: '暖腰暖腹暖胃，靳艾暖宫腰带',
          price: '49.00',
        },
        {
          name: '新年佳礼，家用SPA多功能按摩床垫',
          src: 'https://yanxuan-item.nosdn.127.net/c41003c6df90d7673195dcc2482e13f3.jpg',
          describe: '坐卧两用，随时随地享受',
          price: '599.00',
        },
        {
          name: '七夕礼物-姐姐同款，穿出自信',
          src: 'https://yanxuan-item.nosdn.127.net/a6939f41c48fa9e9c8f7a7ed855351f1.jpg',
          describe: '背薄一寸，年轻十岁',
          price: '159.00',
        },
        {
          name: '带提手可站立炫彩硅胶热水袋',
          src: 'https://yanxuan-item.nosdn.127.net/0b120e1c37f312981f4f2242997cc862.png',
          describe: '杯型式设计，轻松拿捏',
          price: '35.00',
        },
        {
          name: '七夕礼物-挺拔身姿',
          src: 'https://yanxuan-item.nosdn.127.net/7d1bc78607a08c088b2a7cdbe88c05af.png',
          describe: '众筹爆品回归',
          price: '149.00',
        },
        {
          name: '消炎镇痛-贴灵医用冷敷贴60/盒',
          src: 'https://yanxuan-item.nosdn.127.net/d3807695c7d42a0247e308a936201d7c.jpg',
          describe: 'mini型尺寸设计性格',
          price: '79.00',
        },
        {
          name: '真空拔罐盒',
          src: 'https://yanxuan-item.nosdn.127.net/16222847be7d090eb538a944a7e0b01b.jpg',
          describe: '居家养生必备超简单',
          price: '49.00',
        },
        {
          name: '艾灸理疗随时随地',
          src: 'https://yanxuan-item.nosdn.127.net/941abaee58a88cb104228fe2c4cfdeb1.png',
          describe: '哪里不适针灸哪里',
          price: '99.00',
        },
        {
          name: '入门首选，语音播报电子血压计',
          src: 'https://yanxuan-item.nosdn.127.net/8f0c15f981c5cbcb1aa17215a259fa62.png',
          describe: '全程语音指导，一站到底',
          price: '109.00',
        },
      ],
      [
        {
          name: '黄金玉栗粥米500g',
          src: 'https://yanxuan-item.nosdn.127.net/5f62c7ab543b1152383a0e9941c09bfd.png',
          describe: '谷物缤纷，香甜软糯',
          price: '9.9',
        },
        {
          name: '什锦素食粥米500克',
          src: 'https://yanxuan-item.nosdn.127.net/dc4826ddb838d8e17f90402adfa3f4fe.png',
          describe: '谷香米糯，营养美味',
          price: '9.90',
        },
        {
          name: '紫米410克',
          src: 'https://yanxuan-item.nosdn.127.net/a3c0bb3be38ccf510ecaedb81f5bcd9f.png',
          describe: '一年一熟的御田胭脂米',
          price: '19.00',
        },
        {
          name: '加量50%不加价贵州兴仁慧仁米',
          src: 'https://yanxuan-item.nosdn.127.net/3e93790bba8db8aab54ee5ba72799567.png',
          describe: '粒粒饱满，颗颗香甜',
          price: '19.00',
        },
        {
          name: '免浸泡，12种谷物',
          src: 'https://yanxuan-item.nosdn.127.net/bfe70bd66efe94f2f18061c707d2a097.png',
          describe: '无需浸泡，同煮同吃',
          price: '9.90',
        },
        {
          name: '加量45%不加价，内蒙古赤峰黄小米',
          src: 'https://yanxuan-item.nosdn.127.net/564eb51c22d898179b468f5dec52d502.png',
          describe: '赤峰好谷，米香浓郁',
          price: '19.00',
        },
        {
          name: '红小豆450克*3袋',
          src: 'https://yanxuan-item.nosdn.127.net/eaec90be370a438e565e10189b7a390a.png',
          describe: '皮薄易煮，粒粒香甜',
          price: '19.00',
        },
        {
          name: '来自东北的“黑珍珠"',
          src: 'https://yanxuan-item.nosdn.127.net/1452cfeb14b5d252fb1ba97b278e9cc3.png',
          describe: '米汁香稠，Q弹醇香',
          price: '19.00',
        },
        {
          name: '冻干椒豚骨面74克*12盒',
          src: 'https://yanxuan-item.nosdn.127.net/7a5ffe313fe5671709d5a9826f5a83a2.jpg',
          describe: '资珀日式，风味汤浓肉香',
          price: '109.00',
        },
      ],
      [
        {
          name: '懒人瘦出好身材，多功能甩脂塑形机',
          src: 'https://yanxuan-item.nosdn.127.net/540f84174dbf9b98d4072abbd886819e.png',
          describe: '懒人福音居家轻松拿捏',
          price: '589.00',
        },
        {
          name: '软糯似baby肌肤，男式高领',
          src: 'https://yanxuan-item.nosdn.127.net/06156761337ba0fd1f8f51470f698b5f.png',
          describe: '绒毛取自未满1岁的小山羊',
          price: '559.00',
        },
        {
          name: '舒眠真丝眼罩',
          src: 'https://yanxuan-item.nosdn.127.net/85432452d5f40c4798c08f1f0beb4a43.png',
          describe: '顺滑真丝，感受舒适的感觉',
          price: '79.00',
        },
        {
          name: '柔软透烊市殇狮掖芭气，女式精梳棉内裤6条装',
          src: 'https://yanxuan-item.nosdn.127.net/dc30e9603306e59d959e7fac6968244e.jpg',
          describe: '爱慕供应商柔软透光',
          price: '125.00',
        },
        {
          name: '轻灵碳素耐用型羽毛球拍单双拍',
          src: 'https://yanxuan-item.nosdn.127.net/89cc3ab3e332bb1df5dc20241b5ca4bb.png',
          describe: '超轻球拍，运动随时随地都可以',
          price: '1199.90',
        },
        {
          name: '英伦长柄自动晴雨伞',
          src: 'https://yanxuan-item.nosdn.127.net/e77b8f4a8ddd1e777394d84347859f7c.png',
          describe: '雨天有情调，英伦有长柄',
          price: '40.90',
        },
        {
          name: '瑜伽裸感女式运动训练紧身裤',
          src: 'https://yanxuan-item.nosdn.127.net/872275c2e2edacc917e0364065c90121.png',
          describe: '面料韧性足，修身养性',
          price: '83.90',
        },
        {
          name: '恍若没穿鞋，女式轻软舒弹健步鞋',
          src: 'https://yanxuan-item.nosdn.127.net/feec7bde4d52521ae70ab4c5010ce992.png ',
          describe: '宛若没穿鞋的轻盈感觉',
          price: '159.00',
        },
        {
          name: '男中长款鹅绒服',
          src: 'https://yanxuan-item.nosdn.127.net/aa9e03278e3274a2a83f3f8e7df5ee6f.png',
          describe: '一种衣服三种穿法',
          price: '659.00',
        },
      ],
      [
        {
          name: '新款LOGO印花时尚学步叫叫鞋',
          src: 'https://yanxuan-item.nosdn.127.net/841d7669e6cc23cb249f47d8d39fc17c.jpg',
          describe: '软底包头叫叫鞋',
          price: '259.00',
        },
        {
          name: '儿童气泵软底学步阶段学步鞋',
          src: 'https://yanxuan-item.nosdn.127.net/19bedfd20a12842b5d7f7b909a62e877.jpg',
          describe: '气泵大底学步鞋',
          price: '239.00',
        },
        {
          name: '舒适软弹，糖果色儿痢皑盎翱网孔透气运',
          src: 'https://yanxuan-item.nosdn.127.net/c437179bc1d0d5ad77a79f15a5c6f166.png',
          describe: '防踢鞋头，透气',
          price: '139.00',
        },
        {
          name: '防踢鞋头，儿童学步健碍康机能鞋',
          src: 'https://yanxuan-item.nosdn.127.net/33ba674fbb13e2380ee8a74371eacf43.jpg',
          describe: '包头防踢用心呵护',
          price: '129.00',
        },
        {
          name: '抓绒保暖，毛毛虫儿童运动鞋26-30',
          src: 'https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png',
          describe: '宝贝上脚活力出街',
          price: '109.00',
        },
        {
          name: '婴幼儿童透气网面学步鞋小童鞋',
          src: 'https://yanxuan-item.nosdn.127.net/a9f428091f172db89977a511f6639fec.jpg',
          describe: '优质透气网布鞋面',
          price: '119.00',
        },
        {
          name: '学步更自如，婴幼童机能学步鞋',
          src: 'https://yanxuan-item.nosdn.127.net/ef01de6dfac9cc4c548f317f2feddafe.jpg',
          describe: '宝宝的第一双鞋，',
          price: '109.00',
        },
        {
          name: '时笔出街更亮眼儿童休闲老爹鞋',
          src: 'https://yanxuan-item.nosdn.127.net/088c9f9208b82fa4777336d22faa919d.jpg',
          describe: '高弹鞋底',
          price: '109.00',
        },
        {
          name: '释放可爱天性，棉毛布造型领哈衣',
          src: 'https://yanxuan-item.nosdn.127.net/5e2b5629af983dadbceed483dd677eeb.jpg',
          describe: '全程语音指导，一站到底',
          price: '62.00',
        },
      ],
      [
        {
          name: '[新疆棉] 简约山形纹全棉提花毛巾',
          src: 'https://yanxuan-item.nosdn.127.net/e0cea368f41da1587b3b7fc523f169d7.png',
          describe: '新疆长绒棉毛巾，',
          price: '18.5',
        },
        {
          name: '1件装[新疆棉]云珍·轻软旅行',
          src: 'https://yanxuan-item.nosdn.127.net/99c83709ca5f9fd5c5bb35d207ad7822.png',
          describe: '轻巧无捻小方巾',
          price: '7.90',
        },
        {
          name: '国货装云珍·轻软旅行长绒棉毛巾6条装',
          src: 'https://yanxuan-item.nosdn.127.net/f4ed2e5d7b268bb270bce9ce63122ec0.jpg',
          describe: '触碰云软，',
          price: '139.00',
        },
        {
          name: '[新疆棉] 快速擦干，阿瓦提长绒棉',
          src: 'https://yanxuan-item.nosdn.127.net/2f4ff18d601494cb7805ee099ed8a50f.png',
          describe: '瞬间吸水',
          price: '16.90',
        },
        {
          name: '厚厚一按就干爽，埃及进口长绒棉毛',
          src: 'https://yanxuan-item.nosdn.127.net/a5c5398a7c033edb8a052fe1fddf8a81.png',
          describe: '厚实大毛圈，千爽',
          price: '16.90',
        },
        {
          name: '[新疆棉] 云珍·轻软长绒棉浴巾',
          src: 'https://yanxuan-item.nosdn.127.net/957d7a338fc0de044965cc279fce68b2.png',
          describe: '赤峰好谷，米香浓郁',
          price: '129.00',
        },
        {
          name: '[新疆棉] 云珍·轻软馒O条胎行长绒棉毛巾',
          src: 'https://yanxuan-item.nosdn.127.net/2a16452169f9d2e8841ddef76fdd684a.png',
          describe: '轻软亲肤，',
          price: '31.00',
        },
        {
          name: '[新疆棉] 宝宝也能用，全棉华',
          src: 'https://yanxuan-item.nosdn.127.net/3480e3fa68b810f23afb43f6bf2fe45b.png',
          describe: '空气华夫格',
          price: '15.90',
        },
        {
          name: '清洁养护一片搞定皮革护理湿巾',
          src: 'https://yanxuan-item.nosdn.127.net/bc32744cdf844b5136d3d84b0e6ba9d4.jpg',
          describe: '一擦如新懒人必备',
          price: '9.90',
        },
      ],
      [
        {
          name: '医美级冰脱韩国Ulike蓝宝石脉冲光',
          src: 'https://yanxuan-item.nosdn.127.net/3567b2ac2526e6b89124f3fb62fd09d3.png',
          describe: '蓝宝石冰点脱毛，',
          price: '1599.00',
        },
        {
          name: '亮碟多效合一洗涤块495g',
          src: 'https://yanxuan-item.nosdn.127.net/e07c2b63765cf9f4a46d489c6e09c1c1.jpg',
          describe: '洗碗机专用',
          price: '69.00',
        },
        {
          name: '油污克星Mootaa重油污清洁剂',
          src: 'https://yanxuan-item.nosdn.127.net/53a1579ead54c61a9b296d20c78a67ff.jpg',
          describe: '一喷快速溶解油污',
          price: '26.90',
        },
        {
          name: '除味净化袖器Mootaa冰箱抑菌清洁剂',
          src: 'https://yanxuan-item.nosdn.127.net/838c1b94f15e3b200bea21cef8989592.png',
          describe: '除臭杀毒',
          price: '35.00',
        },
        {
          name: '意大利大公鸡管家重油污克星清洁剂',
          src: 'https://yanxuan-item.nosdn.127.net/6a669deef604cd8f080991b3207a3078.png',
          describe: '强效去污',
          price: '39.00',
        },
        {
          name: '强力去垢不伤锅天然棕榈清洁刷长',
          src: 'https://yanxuan-item.nosdn.127.net/7537da93f26f0303d94c59f3889836ed.png',
          describe: '短柄针对顽渍',
          price: '8.00',
        },
        {
          name: '1滴强力去污澳洲超浓缩不伤手洗洁精.',

          src: 'https://yanxuan-item.nosdn.127.net/9ffdc0b1f6dbbe2e9f10a187444c01a3.png',
          describe: '轻轻一拍，',
          price: '29.80',
        },
        {
          name: '[囤货装]日本橙油精华去油污泡沫',
          src: 'https://yanxuan-item.nosdn.127.net/188e05584a056b0e2f17e8c568da8c00.png',
          describe: '温和高效去污，',
          price: '17.90',
        },
        {
          name: '日本冰块冰球制冰模具',
          src: 'https://yanxuan-item.nosdn.127.net/2be38fc160992fe41f7d4a45bd0f90e5.png',
          describe: '强力除油污',
          price: '67.00',
        },
      ],
      [
        {
          name: '书源彩色按动中性笔',
          src: 'https://yanxuan-item.nosdn.127.net/21216556e7d47a4e4277dcb36a16a486.png',
          describe: '化繁为简',
          price: '13.00',
        },
        {
          name: '意外设计小时光便携钢笔',
          src: 'https://yanxuan-item.nosdn.127.net/f3636b063dad944aa527e4652392a553.png',
          describe: '精致',
          price: '328.00',
        },
        {
          name: '创意金属立体拼酷模型',
          src: 'https://yanxuan-item.nosdn.127.net/f3784ed01706f2f2722f12410a6429c9.png',
          describe: '凤舞龙翔呈现华',
          price: '158.90',
        },
        {
          name: '意外设计便携钢笔花信礼盒',
          src: 'https://yanxuan-item.nosdn.127.net/cc1c57b701f202bc585d8fff3b65571e.png',
          describe: '生活的美，',
          price: '398.00',
        },
        {
          name: '用心记录每一句诗，飞乌集钢笔本',
          src: 'https://yanxuan-item.nosdn.127.net/3892e311f3494d2bcc2c1f8ed9e34271.png',
          describe: '谱写情谊之歌',
          price: '89.00',
        },
        {
          name: '谱写爱的篇章，莫扎特钢笔墨水礼盒',
          src: 'https://yanxuan-item.nosdn.127.net/b20165617d2f901e9ad926f39b737e87.png',
          describe: '谱写爱的乐章',
          price: '88.00',
        },
        {
          name: '剪出精致感，金致圆柄复古剪刀.',

          src: 'https://yanxuan-item.nosdn.127.net/4c6a9c8a579b00e5e9c7b002d15a33a2.jpg',
          describe: '轻薄设计',
          price: '9.80',
        },
        {
          name: '平台严选x敦煌博物馆鹿游仙踪植萃车',
          src: 'https://yanxuan-item.nosdn.127.net/15db90ea8c8c7456c1fee4e18abb25da.png',
          describe: '复古敦煌色系，',
          price: '33.90',
        },
        {
          name: '旅途手机好伴侣，合一车载手机支架',
          src: 'https://yanxuan-item.nosdn.127.net/2245a3d6898361236babb66d834e19c8.jpg',
          describe: '带安全锤和应急割',
          price: '49.00',
        },
      ],
      [
        {
          name: '飞宇出游拍摄防抖神器手机稳定器',
          src: 'https://yanxuan-item.nosdn.127.net/2d0a47a51fa4b3e3857f2010bd83bead.jpg',
          describe: '小巧便携',
          price: '439.00',
        },
        {
          name: '黑科技专利款100%防水保暖针织毛线',
          src: 'https://yanxuan-item.nosdn.127.net/3683d874b9623434a10b4ab0c2e6be9f.png',
          describe: '黑科技专利，',
          price: '135.00',
        },
        {
          name: '伊海诗冬日出行多功能防风保暖围脖',
          src: 'https://yanxuan-item.nosdn.127.net/25effebb31ea6fc58b92f5a6aecda8b9.png',
          describe: '时尚针织印花面料',
          price: '35.90',
        },
        {
          name: '运动健身跑步腰包',
          src: 'https://yanxuan-item.nosdn.127.net/610a693cfd6f01adc6923dc1c0ec91aa.jpg',
          describe: '防水反光设计，，',
          price: '40.00',
        },
        {
          name: '可触屏户外出行手套-合集',
          src: 'https://yanxuan-item.nosdn.127.net/264df9f0faddb60e88a8b108058d25e6.png',
          describe: '户外轻松骑行',
          price: '69.00',
        },
        {
          name: '户外快干轻巧遮阳帽',
          src: 'https://yanxuan-item.nosdn.127.net/310eac832a1d90fbea41c4e6a9e604e4.png',
          describe: '有效遮阳，',
          price: '44.00',
        },
        {
          name: '可折叠户外防紫外线鸭舌帽.',

          src: 'https://yanxuan-item.nosdn.127.net/87fbba3cf009e5b69dd14781c594ef79.png',
          describe: '可折叠，',
          price: '44.80',
        },
        {
          name: '防晒快干长檐棒球帽',
          src: 'https://yanxuan-item.nosdn.127.net/7d0b373a6a63882783202c836bae264d.png',
          describe: '遮阳防晒,保暖新潮，',
          price: '69.90',
        },
        {
          name: '探险者黑胶防晒防雨遮阳伞户外钓鱼',
          src: 'https://yanxuan-item.nosdn.127.net/66090c5de391e43e4516601e14870842.jpg',
          describe: '防雨遮阳隔绝紫外',
          price: '169.00',
        },
      ],
      [
        {
          name: '分场景使用不污染，超细纤维抹布',
          src: 'https://yanxuan-item.nosdn.127.net/c520bba8209bae877158e8810d889aca.png',
          describe: '精细分工',
          price: '17.90',
        },
        {
          name: '添加茂金属更强韧，金属色垃圾袋',
          src: 'https://yanxuan-item.nosdn.127.net/251393c0d8db7b0b594ccf86f1e796d0.png',
          describe: '3卷90只，',
          price: '8.90',
        },
        {
          name: '随用随丢，懒人真爱地板清洁',
          src: 'https://yanxuan-item.nosdn.127.net/4c8a1cf2b8e40c250870491307dde11f.jpg',
          describe: '材质加厚',
          price: '8.90',
        },
        {
          name: '灰尘毛发静电吸附地板除尘干巾',
          src: 'https://yanxuan-item.nosdn.127.net/cf7584e037706a8df54fecfc6dfdd2af.jpg',
          describe: '下湿两用，',
          price: '7.90',
        },
        {
          name: '日式和风简约无盖垃圾桶11L',
          src: 'https://yanxuan-item.nosdn.127.net/ca7144b1f5fda5528dd8e4c40abc3bcc.png',
          describe: '敞口设计易洗易工',
          price: '9.00',
        },
        {
          name: '大容量干湿分类脚踏缓降静音垃圾.',
          src: 'https://yanxuan-item.nosdn.127.net/1b322ed8c25f94f1fbf39ddb5fedeb47.jpg',
          describe: '有效遮阳，',
          price: '9.00',
        },
        {
          name: '一抽即提，免脏手，加厚抽绳垃圾.',

          src: 'https://yanxuan-item.nosdn.127.net/72af0b7c1d7b0b9710de621788326d2b.png',
          describe: '18um及10um',
          price: '9.80',
        },
        {
          name: '软糯治愈系擦手雪尼尔擦手球',
          src: 'https://yanxuan-item.nosdn.127.net/43d99e9b97cc55033b0f59b95a91ae49.png',
          describe: '吸水快干，',
          price: '9.50',
        },
        {
          name: '软糯治愈系擦手雪尼尔擦手球',
          src: 'https://yanxuan-item.nosdn.127.net/43d99e9b97cc55033b0f59b95a91ae49.png',
          describe: '吸水快干，',
          price: '9.50',
        },
      ],
    ]

    const ul = document.querySelector('.menu')
    const ul_right = document.querySelectorAll('.munu-detail')
    const right_ul = document.querySelectorAll('.munu-bottom ul')

    function fn(arr, index) {
      let str = ''
      right_ul[index].innerHTML = ''
      for (let i = 0; i < arr.length; i++) {
        str += `
      <li>
                  <div class="detail">
                    <!-- 放置图片的盒子 -->
                    <div class="photo">
                      <img
                        src=${arr[i].src}
                        alt=""
                      />
                      <span class="title elli">${arr[i].name}</span>
                      <span class="describe ">${arr[i].describe}</span>
                      <span class="price"><i>￥</i>${arr[i].price}元</span>
                    </div>
                  </div>
                </li>
      `
      }
      return str
    }
    ;[...ul.children].forEach(function (item) {
      item.addEventListener('mouseenter', function (e) {
        const index = e.target.dataset.index
        ul_right[index].classList.add('active')
        right_ul[index].innerHTML = fn(data[index], index)
      })
      item.addEventListener('mouseleave', function (e) {
        const index = e.target.dataset.index
        ul_right[index].classList.remove('active')
      })
    })
  })()

  // 新鲜好物
  ;(function () {
    const data = [
      {
        src: 'https://yanxuan-item.nosdn.127.net/841d7669e6cc23cb249f47d8d39fc17c.jpg',
        name: '抓绒保暖，毛毛虫儿童运动鞋26-30',
        price: '109.00',
      },
      {
        src: '	https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg',
        name: '休闲潮流运动男士胸包',
        price: '136.00',
      },
      {
        src: 'https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png',
        name: '经典格子元素，男童加绒格子衬衫',
        price: '125.00',
      },
      {
        src: 'https://yanxuan-item.nosdn.127.net/fa3d10a78d37bbd3956ef5f8c855d1dc.jpg',
        name: '新款LOGO印花时尚学步叫叫鞋',
        price: '259.00',
      },
    ]
    const ul = document.querySelector('.good-list')
    ul.addEventListener('click', function (e) {
      if (e.target.tagName === 'IMG') {
        location.href = './html/ProductShowcasePage.html'
      }
    })
    let str = ''

    for (let i = 0; i < data.length; i++) {
      str += `
     <li>
            <!-- 放置图片盒子 -->
            <div class="img">
              <img src=${data[i].src} alt="" />
            </div>
            <!-- 放置文字盒子 -->
            <div class="text">
              <p class="title ellipsis">${data[i].name}</p>
              <p class="price">￥<i>${data[i].price}</i></p>
            </div>
          </li>`
    }
    ul.innerHTML = str
    /*  ;[...ul.children].forEach(function (item) {
              item.addEventListener('mouseenter', function () {
                item.classList.add('up')
              })
            }) */
  })()
  ;(function () {
    const data = [
      {
        src: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg',
        name: '特惠推荐',
        msg: '它们最实惠',
      },
      {
        src: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_2.jpg',
        name: '爆款推荐',
        msg: '它们最欢迎',
      },
      {
        src: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg',
        name: '一站买全',
        msg: '使用场景下精心挑选',
      },
      {
        src: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_4.jpg',
        name: '领卷中心',
        msg: '更多超值优惠眷',
      },
    ]
    const ul = document.querySelector('.panel-hot .good-list')
    let str = ''
    ul.addEventListener('click', function (e) {
      if (e.target.tagName === 'IMG') {
        location.href = './html/ProductShowcasePage.html'
      }
    })
    for (let i = 0; i < data.length; i++) {
      str += `
     <li>
            <!-- 放置图片盒子 -->
            <div class="img">
              <img src=${data[i].src} alt="" />
            </div>
            <!-- 放置文字盒子 -->
            <div class="text">
              <p class="title ellipsis">${data[i].name}</p>
              <p class="msg">${data[i].msg}</p>
            </div>
          </li>`
    }
    ul.innerHTML = str
  })()
  ;(function () {
    const brand = document.querySelector('.brand')
    const theme = document.querySelector('.theme')
    const look = document.querySelector('.look')
    const lookAll = document.querySelector('#look')
    function click(a) {
      a.onclick = function () {
        // location.href = './index.html'
        document.documentElement.scrollTop = 0
      }
      /*  a.addEventListener('click', function () {
            console.log(1)
            location.href = './index.html'
            document.documentElement.scrollTop = 0
            // window.screenTop = 0
          }) */
    }
    click(brand)
    click(theme)
    click(look)
    click(lookAll)
  })()

  // 登录退出
  const login = document.querySelector('.topnav_right>ul>li:nth-child(1)>a')
  const register = document.querySelector('.topnav_right>ul>li:nth-child(2)>a')
  const mima = localStorage.getItem('mima')
  if (mima) {
    login.innerHTML = `<i class="toutiao">&#xe634;</i> 黑马先锋`
    register.innerHTML = `退出登录`
  }
  login.addEventListener('click', function () {
    if (login.innerHTML === `请先登录`) {
      location.href = './html/login.html'
    } else {
      location.href = './html/personalCenter.html'
    }
  })
  register.addEventListener('click', function () {
    if (login.innerHTML === `请先登录`) {
      location.href = './html/register.html'
    } else {
      localStorage.removeItem('mima')
      location.href = './html/login.html'
      localStorage.setItem('quit', 'quit')
    }
  })

  // 个人主页跳转
  const nom = document.querySelector('.topnav_right>ul>li:nth-child(3)>a')
  const VIP = document.querySelector('.topnav_right>ul>li:nth-child(4)>a')
  nom.addEventListener('click', function () {
    if (login.innerHTML !== `请先登录`) {
      location.href = './html/order.html'
    } else {
      location.href = './html/login.html'
    }
  })
  VIP.addEventListener('click', function () {
    if (login.innerHTML !== `请先登录`) {
      location.href = './html/personalCenter.html'
    } else {
      location.href = './html/login.html'
    }
  })

  const goin = localStorage.getItem('goin')
  if (goin) {
    new Dialog({
      text: '登录成功',
    })
    localStorage.removeItem('goin')
  }
})
